<template>
    <view class="user-info">
        <view class="info-header">
            <!-- 封面 -->
            <image
                class="header-cover"
                :src="
                    currentUser.coverUrl ||
                    'https://han-soul.oss-cn-shenzhen.aliyuncs.com/cover/default_cover.png'
                "
            ></image>

            <!-- 用户信息 -->
            <view class="header-user">
                <image
                    class="user-avatar"
                    :src="
                        currentUser.avatarUrl ||
                        'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/1.png'
                    "
                />

                <view class="user-meta">
                    <view class="meta-row">
                        <text class="user-username">{{
                            currentUser.username || '请登录'
                        }}</text>
                        <text class="user-level">
                            <han-icon
                                :name="'lv' + (currentUser.level || 0)"
                                size="64"
                            />
                        </text>
                    </view>

                    <view class="user-points"
                        >积分：{{ currentUser.points ?? 0 }}</view
                    >
                </view>
            </view>

            <!-- 设置按钮 -->
            <view class="head-set" @click="navigateToSetting">
                <han-icon name="setting" size="48" />
            </view>
        </view>

        <!-- 关注/粉丝 -->
        <view class="info-content">
            <view
                v-for="(stat, index) in statsData"
                :key="index"
                class="content-stats"
                @click="navigateToRelationship(index)"
            >
                <text class="stat-num">{{ stat.value }}</text>
                <text class="stst-label">{{ stat.label }}</text>
            </view>

            <button class="profile-editor" @click="navigateToProfileEditor">
                资料编辑
            </button>
        </view>

        <!-- 简介 -->
        <view class="info-bio">
            <view class="bio-text">{{
                currentUser.bio || '这个人很懒，什么都没留下~'
            }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useUserStore } from '@/stores/userStores.js';

const userStore = useUserStore();

const currentUser = computed(() => userStore.currentUser);

// 动态计算统计数据
const statsData = computed(() => {
    return [
        { label: '获赞', value: currentUser.value.stats?.likes || 0 },
        { label: '互关', value: currentUser.value.stats?.mutualCount || 0 },
        { label: '关注', value: currentUser.value.stats?.followingCount || 0 },
        { label: '粉丝', value: currentUser.value.stats?.fansCount || 0 }
    ];
});

onMounted(() => {
    userStore.init();
    currentUser.value = userStore.currentUser;

    if (!userStore.currentUser.username) {
        userStore.fetchCurrentFullUserInfo();
    }
});

// 跳转到设置页
const navigateToSetting = () => {
    uni.navigateTo({
        url: '/pages/user/subpages/setting/setting'
    });
};

// 跳转到资料编辑页
const navigateToProfileEditor = () => {
    uni.navigateTo({
        url: '/pages/user/subpages/profile_editor/profileEditor'
    });
};

// 跳转到关系页
const navigateToRelationship = (index) => {
    const typeMap = {
        1: 1, // 互关
        2: 2, // 关注
        3: 3 // 粉丝
    };

    uni.navigateTo({
        url: `/pages/user/subpages/relationship/relationship?type=${typeMap[index]}&userId=${currentUser.value.userId}`
    });
};
</script>

<style lang="scss">
.user-info {
    .info-header {
        display: flex;
        position: relative;

        .header-cover {
            background-color: #fff;
            width: 100%;
            height: 400rpx;

            // 添加渐变效果
            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    to top,
                    rgba(51, 51, 51, 0.3) 0%,
                    rgba(51, 51, 51, 0.15) 60%,
                    rgba(51, 51, 51, 0) 100%
                );
                pointer-events: none; /* 防止遮挡点击事件 */
            }
        }

        .header-user {
            display: flex;
            position: absolute;
            align-items: center;

            .user-avatar {
                background-color: blue;
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                border: 2px solid #fff;
                margin: 100rpx 20rpx;
            }

            .user-meta {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 10rpx;
                color: #fff;

                .meta-row {
                    display: flex;
                    align-items: flex-start; // 确保子元素顶部对齐
                    gap: 10rpx;

                    .user-username {
                        font-size: $han-font-size-xl;
                        line-height: $han-line-height-base;
                        max-width: 400rpx; // 限制最大宽度
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2; // 两行省略
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                    }

                    .user-level {
                        font-size: $han-font-size-sm;
                        display: inline-block;
                        vertical-align: bottom;
                    }
                }

                .user-points {
                    font-size: $han-font-size-sm;
                    margin-top: 10rpx;
                }
            }
        }

        .head-set {
            position: absolute;
            right: 40rpx;
            top: 50rpx;
        }
    }

    .info-content {
        margin-top: 20rpx;
        display: flex;
        border-top-right-radius: 20rpx;
        border-top-left-radius: 20rpx;
        padding: 10rpx 0;
        height: 120rpx;

        .content-stats {
            width: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .stat-num {
                font-size: $han-font-size-base;
                font-weight: bold;
                margin-bottom: 10rpx;
            }

            .stst-label {
                font-size: $han-font-size-sm;
                color: $han-global-secondary-font-color;
            }
        }

        .profile-editor {
            width: 200rpx;
            height: $han-button-height-sm;
            font-size: $han-font-size-base;
            align-self: center;
            margin: auto;
            background: #f7f7f7;
        }
    }

    .info-bio {
        display: flex;
        align-items: flex-start;
        padding: 10rpx 20rpx;
        height: 100rpx;

        .bio-text {
            font-size: $han-font-size-xs;
            color: $han-global-secondary-font-color;
            width: 100%;

            // 单行省略
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // width: 100%;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 显示2行 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1.5;
        }
    }
}
</style>
